<template>
	<view class="rewardmanagement">
		<!-- 顶部导航 -->
		<diyNavBar value='审核管理' :fixed='true'></diyNavBar>
		<view class="tabs" :style="immersed?'top:' + immersed:'90rpx'">
			<view class="tabs-item" 
			:class="indexJudge == index?'colorhover':''"
			v-for="(item,index) in tabList" :key='index'
			 @click="select(index)">
				{{item.name}}
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback"
		 :up = "upOption" :down="downOption" class="scroll" :top = '200 + $store.state.statusBarHeight'>
			<view  class="item" v-for="(item,index) in taskList" :key='index'>
				<view class="top">
					<image :src="$util.img(item.file)" mode=""></image>
					<view class="left">
						<view class="lefttop">
							<view class="text">{{item.taskname}}</view>
							<text class="money">￥{{item.price}}元</text>
						</view>
						<text class="time">{{item.start_time}}</text>
					</view>
				</view>
				
				<view class="btn" @click="giveup(item,index)" v-if="item.status==0">放弃任务</view>
				<view class="btn btnhover1" v-if="item.status==0" @click="$util.redirectTo('/pages/newtaskdetails/taskdetails',{id:item.task_id})">提交任务</view>
				<view class="btn" v-if="item.status==1" @click="$util.redirectTo('/pages/newtaskdetails/taskdetails',{id:item.task_id,task_order_id:item.id})" >审核中</view>
				<view class="btn" v-if="item.status==2" @click="$util.redirectTo('/pages/newtaskdetails/taskdetails',{id:item.task_id})">不合格</view>
				<view class="btn btnhover2" v-if="item.status==3">已完成</view>
				<view class="btn" v-if="item.status==4">已过期</view>
				<view class="btn" v-if="item.status==5">已放弃</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default{
		components:{
			diyNavBar
		},
		mixins: [MescrollMixin],
		data(){
			return {
				//选中的下标
				indexJudge:0,
				// tabs内容
				tabList:[{
					name:'全部',
					status:''
				},
				// {
				// 	name:'待提交',
				// 	status:0
				// },
				{
					name:'审核中',
					status:1
				},{
					name:'不合格',
					status:2
				},{
					name:'已完成',
					status:3
				}],
				taskList:[],
				// 滚动
				upOption:{
					page:{
						num:0,
						size:8
					},
				},//上拉参数配置
				downOption:{
					auto:false,
					page:{
						num:0,
						size:8
					}
				},//下拉参数配置
				immersed:0,//手机状态栏高度
			}
		},
		onLoad(option) {
			this.indexJudge = option.status || '';
			this.immersed = uni.getSystemInfoSync().statusBarHeight * 2 + 90 + 'rpx';
		},
		methods:{
			//切换选中
			select(index){
				this.indexJudge = index;
				this.taskList = [];
				this.mescroll.resetUpScroll()
			},
			// 下拉刷新
			downCallback(page){
				this.mescroll.resetUpScroll()
			},
			//上拉加载
			upCallback(page){
				this.$http.sendrequest('/TaskOrder/TaskOrderxsList',{
					page:page.num,
					pagesize:page.size,
					status:this.tabList[this.indexJudge].status
				},{
					tokenJudge:true
				}).then(res=>{
					if(res.code == 1){
						if(page.num == 1) this.taskList = []; //如果是第一页需手动制空列表
						this.taskList = this.taskList.concat(res.data.list);
						this.mescroll.endBySize(res.data.list.length, res.data.count);
					}
				})
			},
			//放弃任务
			giveup(item,index){
				this.$http.sendrequest('/TaskOrder/FqTask',{
					id:item.id,
					task_id:item.task_id
				},{
					tokenJudge:true
				}).then(res=>{
					uni.showToast({title:res.msg,icon:'none'})
					if(res.code == 1){
						this.taskList.splice(index,1);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rewardmanagement{
		min-height: 100vh;
		background: $uni-content-background-color;
		.tabs{
			width: 100%;
			height: 88rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			position: fixed;
			width: 100%;
			top: 90rpx;
			left: 0;
			z-index: 99999;
			.tabs-item{
				width: 248rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 28rpx;
				color: #999999;
				font-weight: bold;
			}
			.colorhover{
				color: #FF6F30;
				transition: all .3s;
			}
		}
		.scroll{
			// height: calc(100vh - 210rpx);
			.item{
				margin: 0 30rpx;
				background: #FFFFFF;
				height: 240rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				padding: 40rpx 26rpx 0 32rpx;
				box-sizing: border-box;
				.top{
					display: flex;
					align-items: center;
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.left{
						display: flex;
						flex-direction: column;
						margin-left: 16rpx;
						width: 83%;
						.lefttop{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20rpx;
							.text{
								font-size: 26rpx;
								width: 320rpx;
								white-space:nowrap;
								overflow:hidden;
								text-overflow:ellipsis;
								margin-right: 40rpx;
							}
							.money{
								color: #FF6F30;
								font-size: 28rpx;
								font-weight: bold;
							}
						}
						.time{
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
				.btn{
					padding: 10rpx 40rpx;
					border: 2rpx solid #FF6F30;
					color: #FF6F30;
					border-radius:60rpx;
					float: right;
					margin: 10rpx 0 0 10rpx;
					font-size: 26rpx;
				}
				.btnhover1{
					background: #FF6F30;
					color: #FFFFFF;
				}
				.btnhover2{
					border: 2rpx solid #4689FF;
					color: #4689FF;
				}
			}
		}
	}
	/deep/ ::-webkit-scrollbar{
		width: 0;
	}
</style>
